window.onload = function () {
  
  //获得表单数据
  function getdata () {
    var diana = document.querySelector('.diana');
    var ava = document.querySelector('.ava');
    var bella = document.querySelector('.bella');
    var data = new Array;
    data = [Number(diana.value),Number(ava.value) ,Number(bella.value)];
    return data;
  }

  //画图
  function draw () {
    var mycanvas = document.querySelector('.mycanvas');
    var ctx = mycanvas.getContext('2d');
    var data = getdata();
    var data1 = data[0];
    var data2 = data[1];
    var data3 = data[2];

    //画饼状图
    var dataSum = data1 + data2 + data3;
    data1 = data1 / dataSum * Math.PI * 2;
    data2 = data2 / dataSum * Math.PI * 2;
    data3 = data3 / dataSum * Math.PI * 2;
    ctx.beginPath();
    ctx.moveTo(300,300);
    //圆形  弧  参数：中心点x 中心点y 半径r 起始弧度 结束弧度 顺时针/逆时针 默认是顺时针
    ctx.arc(300, 300, 200, 0,data1,false);
    ctx.fillStyle = "pink";
    ctx.fill();

    ctx.beginPath();
    ctx.moveTo(300,300);
    ctx.arc(300, 300, 200,data1,data1+data2, false);
    ctx.fillStyle = "purple";
    ctx.fill();

    ctx.beginPath();
    ctx.moveTo(300,300);
    ctx.arc(300, 300, 200, data1+data2,data1+data2+data3, false);
    ctx.fillStyle = "red";
    ctx.fill();

    //画柱状图
    data1 = data[0];
    data2 = data[1];
    data3 = data[2];
    
    data1 = data1 / dataSum*800;
    data2 = data2 / dataSum*800;
    data3 = data3 / dataSum*800;

    ctx.beginPath();
    ctx.fillStyle = "pink";
    ctx.fillRect(700, 230, 80, data1);
    
    ctx.beginPath();
    ctx.fillStyle = "purple";
    ctx.fillRect(800, 230+data1-data2, 80, data2);
    
    ctx.beginPath();
    ctx.fillStyle = "red";
    ctx.fillRect(900, 230+data1-data3,80,data3);
    
  }

  var btn = document.querySelector('button');
  btn.addEventListener('click',draw);
  
}